<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="title"
    :visible="visible"
    lock-scroll
    width="600px"
    @close="close"
  >
    <el-form ref="form" :model="dataForm" :rules="dataFormRules" label-width="120px">
      <el-form-item label="周期(签到天数)" prop="checkin_count">
        <el-input-number v-model="dataForm.checkin_count" :min="1"/>
      </el-form-item>

      <el-form-item label="奖励类型" prop="reward_type">
        <el-select v-model="dataForm.reward_type" class="mr-4" clearable placeholder="请选择奖励类型">
          <el-option
            v-for="item in rewardType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <!--  礼物  -->
      <section v-show="dataForm.reward_type === 'gift'">

        <el-form-item label="礼物名称" prop="reward_id">
          <el-select v-model="dataForm.reward_id" clearable placeholder="请选择具体奖励">
            <el-option v-for="gift in giftList" :key="gift.id" :label="gift.name" :value="gift.id">
              <section class="flex items-center justify-between">
                <span>{{ gift.name }}</span>
                <img :src="gift.picture" alt="" class="w-8 h-8">
              </section>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="有效期" prop="count">
          <section class="flex items-center">
            <el-input-number v-model="dataForm.count" :max="1e5" :min="1" class="mr-4"/>
            <p class="mr-8">天</p>
          </section>
        </el-form-item>
      </section>

      <!-- 虚拟币 -->
      <section v-show="dataForm.reward_type === 'coin'">

        <el-form-item label="数量" prop="count">
          <el-input-number v-model="dataForm.count" :max="1e5" :min="0" class="mr-4"/>
        </el-form-item>

      </section>

      <!-- 商品 -->
      <section v-show="dataForm.reward_type === 'product'">

        <el-form-item label="奖励名称" prop="reward_id">
          <el-select v-model="dataForm.reward_id" clearable placeholder="请选择具体奖励">
            <el-option v-for="product in productList" :key="product.id" :label="product.product_name"
                       :value="product.id"
            >
              <section class="flex items-center justify-between">
                <span>{{ product.product_name }}</span>
                <img :src="product.picture" alt="" class="w-8 h-8">
              </section>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="数量" prop="count">
          <el-input-number v-model="dataForm.count" :max="1e5" :min="0" class="mr-4"/>
        </el-form-item>
      </section>

      <el-form-item label="是否显示" prop="is_visible">
        <el-radio-group v-model="dataForm.is_visible">
          <el-radio-button :label="1">显示</el-radio-button>
          <el-radio-button :label="0">隐藏</el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <section slot="footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </section>
  </el-dialog>
</template>

<script>
import { rewardType } from '@/views/anchorReward/config'
import request from '@/utils/request'

const rules = {
  checkin_count: [{ required: true }],
  reward_type: [{ required: true }],
  reward_id: [{ required: true }],
  count: [{ required: true }],
  is_visible: [{ required: true }]
}

const dialogTitle = {
  add: '新增',
  edit: '编辑'
}

export default {
  props: {
    refreshData: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      visible: false,
      rewardType,
      dataFormRules: rules,
      dataForm: {
        id: undefined,
        checkin_count: 1,
        reward_type: 'coin',
        reward_id: 1,
        count: 0,
        is_visible: 1
      },
      title: dialogTitle.add,
      giftList: [],
      productList: []
    }
  },
  computed: {
    form() {
      return this.$refs.form
    }
  },
  created() {
    this.initData()
  },
  methods: {
    /*
    * 初始化下拉数据
    * */
    async initData() {
      try {
        const { data: { data: giftList } } = await request({ url: '/gift/general-gift?sale_status=-1&page_size=100' })
        const { data: { data: productList } } = await request({ url: '/mall/product/list?cate_id=0&status=1&style_id=0&page=1&page_size=100' })

        this.giftList = giftList
        this.productList = productList
      } catch (e) {
        console.error(e)
      }
    },

    show(row) {
      if (row) {
        const { id, checkin_count, reward_type, reward_id, count, is_visible } = row
        this.dataForm.id = id
        this.dataForm.checkin_count = checkin_count
        this.dataForm.reward_type = reward_type
        this.dataForm.reward_id = reward_id
        this.dataForm.count = count
        this.dataForm.is_visible = is_visible

        this.title = dialogTitle.edit
      } else {
        this.title = dialogTitle.add
      }
      this.visible = true
    },

    // 取消操作
    handleCancel() {
      this.form.resetFields()
      this.visible = false
    },

    /*
    * 确认操作
    * */
    async handleConfirm() {
      try {
        if (this.title === dialogTitle.edit) /* 编辑 */ {
          const id = this.dataForm.id
          const { code } = request({
            url: `/presenter/checkin/reward/${id}`,
            method: 'put',
            params: this.dataForm
          })

          if (code === 200) {
            this.$message.success('编辑成功')
          } else {
            throw new Error('编辑失败')
          }
        } else if (this.title === dialogTitle.add) /* 新增 */ {
          const { code } = await request({
            url: '/presenter/checkin/reward',
            method: 'post',
            data: this.dataForm
          })
          if (code === 200) {
            this.$message.success('创建成功')
          } else {
            throw new Error('创建失败')
          }
        }
        this.refreshData()
      } catch (e) {
        console.error(e)
      } finally {
        this.dataForm = {
          checkin_count: 1,
          reward_type: 'coin',
          reward_id: 1,
          count: 0,
          is_visible: 1,
          id: undefined
        }

        this.visible = false
      }
    },
    close() {
      this.dataForm = {
        checkin_count: 1,
        reward_type: 'coin',
        reward_id: 1,
        count: 0,
        is_visible: 1,
        id: undefined
      }

      this.visible = false
    }
  },
  watch: {
    'dataForm.reward_type'(value) {
      if (value === 'coin') {
        this.dataForm.reward_id = 1
      }
    }
  }
}
</script>

<style scoped>

</style>
